import './index.scss';
import newCommercial from '../../assets/new-commercial.png'
import store1 from '../../assets/store-1.png'
import store2 from '../../assets/store-2.png'
import store3 from '../../assets/store-3.png'
import store4 from '../../assets/store-4.png'
import store5 from '../../assets/store-5.png'
import store6 from '../../assets/store-6.png'
import store7 from '../../assets/store-7.png'
import store8 from '../../assets/store-8.png'

const storeImg = [
  {},
  {
    src: store1,
    text: '数字店铺'
  }, {
    src: store2,
    text: '精准推广'
  },
  {
    src: store3,
    text: '场景营销'
  },
  {
    src: store4,
    text: '交易保障'
  },
  {
    src: store5,
    text: '支付结算'
  },
  {
    src: store6,
    text: '报关退税'
  },
  {
    src: store7,
    text: '跨境物流'
  },
  {
    src: store8,
    text: '金融服务'
  },
] as Record<string, string>[]

const Page2 = () => {
  return <div className="alibaba-page-2-container">
    <div className="title">
      <span className="orange">先进智能高效</span>
      <span>的</span><br />
      <span>数字化贸易科技平台</span>
    </div>
    <div className="child-title child-title-1">AI生意助手</div>
    <div className="child-text-1 child-text">
      <span className='font-bold'>
        智能商品标题、图片与视频，接待买家，分析诊断商品
      </span>
      <span>，助力商家轻松获客快速成单</span>
    </div>
    <video controls src="https://cloud.video.taobao.com/play/u/null/p/1/e/6/t/1/443539957185.mp4 " className="child-video-1 media-content"></video>
    <div className="child-title child-title-2">每天都有新商机</div>
    <div className="child-text-2 child-text">
      <div className="child-text-2-item">极简开店：1个窗口完成所有运营操作</div>
      <div className="child-text-2-item">快速获客：新商家每天至少1 个新商机</div>
      <div className="child-text-2-item">专人指导：1V1店铺运营指导</div>
    </div>
    <img src={newCommercial} className="child-image-2 media-content"></img>
    <div className="child-title child-title-3">全链路数字外贸服务</div>
    <div className="child-text-3 child-text">提供 智能高效 全套数字外贸服务，一站解决您的所有需求</div>
    <div className="child-image-3 media-content">
      <div className="images-3-container images-line-1">
        {
          [1, 2, 3, 4].map(item => {
            return <div className='child-image-3-item-container' key={item}>
              <img src={storeImg[item].src} alt="" className='child-image-3-item' />
              <div className='child-image-3-item-text'>{storeImg[item].text}</div>
            </div>
          })
        }
      </div>
      <div className="images-3-container images-line-2">
        {
          [5, 6, 7, 8].map(item => {
            return <div className='child-image-3-item-container' key={item}>
              <img src={storeImg[item].src} alt="" className='child-image-3-item' />
              <div className='child-image-3-item-text'>{storeImg[item].text}</div>
            </div>
          })
        }
      </div>

    </div>
  </div>
}

export default Page2;